<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="" style="margin-top: 3%;">
    <!-- 试卷信息 -->
    <div>
        <div align="center">
            <b style="font-size: 30px;" th:href="@{'info/' + ${paper.id}}" th:text="${paper.name}"></b>
            (<span th:text="${paper.createTime}"></span>)
        </div>
        <div class="layui-col-xs5 layui-col-xs-offset7" style="font-size: 20px;margin-top: 2%;">
            <span>-----试卷分数：</span>
            <span th:text="${paper.score}"></span>
        </div>
    </div>
    <!-- 试卷题目 -->
    <form class="layui-form" lay-filter="content">
        <!-- 单项选择题 -->
        <div class="layui-col-md11 layui-col-md-offset1">
            <h1>1. 单项选择题</h1>
            <div class="layui-form-item" th:each="oneChoice, status : ${oneChoices}" style="margin: 1%;">
                <div class="layui-col-xs12">
                    <span th:text="${status.count} + '.&nbsp;'"></span>
                    <span th:text="${oneChoice.question}"></span>
                    (<span th:text="${oneChoice.score}"></span>分)
                </div>
                <div class="layui-col-xs6">
                    <div>
                        <input class="layui-radio" type="radio" th:name="${'o_' + oneChoice.id}" value="A"
                               th:title="${'A.&nbsp;' + oneChoice.aa}"/>
                    </div>
                    <div>
                        <input class="layui-radio" type="radio" th:name="${'o_' + oneChoice.id}" value="B"
                               th:title="${'B.&nbsp;' + oneChoice.ab}"/>
                    </div>
                    <div>
                        <input class="layui-radio" type="radio" th:name="${'o_' + oneChoice.id}" value="C"
                               th:title="${'C.&nbsp;' + oneChoice.ac}"/>
                    </div>
                    <div>
                        <input class="layui-radio" type="radio" th:name="${'o_' + oneChoice.id}" value="D"
                               th:title="${'D.&nbsp;' + oneChoice.ad}"/>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div th:if="${oneChoice.isImage}"><img height="100px" width="100px" alt="图"
                                                           th:src="@{'http://192.168.0.105/image/TestSystem/paper/oneChioce/' + ${oneChoice.id} + '.jpg'}">
                    </div>
                </div>
            </div>
        </div>
        <!-- 多项选择题 -->
        <div class="layui-col-md11 layui-col-md-offset1">
            <h1>2. 多项选择题</h1>
            <div th:each="multipleChoice, status : ${multipleChoices}" style="margin: 1%;">
                <div class="layui-col-xs12">
                    <span th:text="${status.count} + '.&nbsp;'"></span>
                    <span th:text="${multipleChoice.question}"></span>
                    (<span th:text="${multipleChoice.score}"></span>分)
                </div>
                <div class="layui-col-xs6 layui-row">
                    <div style="margin-top: 1%;margin-bottom: 1%;">
                        <input type="checkbox" th:name="${'m_' + multipleChoice.id}" value="A" lay-skin="primary"/>
                        A.&nbsp;<span th:text="${multipleChoice.aa}"></span>
                    </div>
                    <div style="margin-top: 1%;margin-bottom: 1%;">
                        <input type="checkbox" th:name="${'m_' + multipleChoice.id}" value="B" lay-skin="primary"/>
                        B.&nbsp;<span th:text="${multipleChoice.ab}"></span>
                    </div>
                    <div style="margin-top: 1%;margin-bottom: 1%;">
                        <input type="checkbox" th:name="${'m_' + multipleChoice.id}" value="C" lay-skin="primary"/>
                        C.&nbsp;<span th:text="${multipleChoice.ac}"></span>
                    </div>
                    <div style="margin-top: 1%;margin-bottom: 1%;">
                        <input type="checkbox" th:name="${'m_' + multipleChoice.id}" value="D" lay-skin="primary"/>
                        D.&nbsp;<span th:text="${multipleChoice.ad}"></span>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div th:if="${multipleChoice.isImage}"><img height="100px" width="100px" alt="图"
                                                                th:src="@{'http://192.168.0.105/image/TestSystem/paper/multipleChoice/' + ${multipleChoice.id} + '.jpg'}">
                    </div>
                </div>
            </div>
        </div>
        <!-- 判断题 -->
        <div class="layui-col-md11 layui-col-md-offset1">
            <h1>3. 判断题</h1>
            <div th:each="judgment, status : ${judgments}" style="margin: 1%;">
                <div>
                    <span th:text="${status.count} + '.&nbsp;'"></span>
                    <span th:text="${judgment.question}"></span>(&nbsp;&nbsp;)
                    (<span th:text="${judgment.score}"></span>分)
                    <input type="radio" th:name="${'j_' + judgment.id}" value="1" title="正确">
                    <input type="radio" th:name="${'j_' + judgment.id}" value="0" title="错误">
                </div>
            </div>
        </div>
        <!-- 填空题 -->
        <div class="layui-col-md11 layui-col-md-offset1">
            <h1>4. 填空题</h1>
            <div th:each="fullInTheBlank, status : ${fullInTheBlanks}" style="margin: 1%;">
                <div class="layui-col-xs12">
                    <span th:text="${status.count} + '.&nbsp;'"></span>
                    <span th:text="${fullInTheBlank.question}"></span>
                    (<span th:text="${fullInTheBlank.score}"></span>分)
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-col-xs8">
                        <input type="text" th:name="${'f_' + fullInTheBlank.id}" placeholder="请输入答案"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div th:if="${fullInTheBlank.isImage}"><img height="100px" width="100px" alt="图"
                                                                th:src="@{'http://192.168.0.105/image/TestSystem/paper/fullInTheBlank/' + ${fullInTheBlank.id} + '.jpg'}">
                    </div>
                </div>
            </div>
        </div>
        <!-- 简答题 -->
        <div class="layui-col-md11 layui-col-md-offset1">
            <h1>5. 简答题</h1>
            <div th:each="discussion, status : ${discussions}" style="margin: 1%;">
                <div class="layui-col-xs12">
                    <span th:text="${status.count} + '.&nbsp;'"></span>
                    <span th:text="${discussion.question}"></span>
                    (<span th:text="${discussion.score}"></span>分)
                </div>
                <div class="layui-col-xs12" style="margin-top: 1%;margin-bottom: 1%;height: 100px;color: red;">
                    <div class="layui-col-xs6">
                        <div class="layui-col-xs8">
                            <textarea th:name="${'d_' + discussion.id}" placeholder="请输入答案"
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div th:if="${discussion.isImage}"><img height="100px" width="100px" alt="图"
                                                                th:src="@{'http://192.168.0.105/image/TestSystem/paper/discussion/' + ${discussion.id} + '.jpg'}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md11 layui-col-md-offset1" style="margin-top: 2%;margin-bottom: 2%;">
            <button type="button" lay-submit lay-filter="test" class="layui-btn">交卷</button>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    var answer = {};
    var temp = {};
    var paperId = [[${paper.id}]]
    var courseId = [[${paper.courseId}]]
    layui.use(['form', 'layer'], function () {
        var layer = layui.layer;
        var form = layui.form;
        //监听checkbox选中
        form.on('checkbox', function (data) {
            var val = data.elem.getAttribute('name');
            if (answer.hasOwnProperty(val)) {
                if (data.elem.checked) {
                    answer[val].push(data.value)
                } else {
                    answer[val].pop(data.value)
                }
            } else {
                answer[val] = []
                answer[val].push(data.value)
            }
        });
        //监听提交
        form.on('submit(test)', function (data) {
            //console.log(data.field)
            var field = data.field;
            for (var key in field) {
                if (key.indexOf('m') == -1) {
                    answer[key] = field[key];
                }
            }
            var content = JSON.stringify(answer);
            $.post('course/complete', {
                paperId: paperId,
                courseId: courseId,
                cont: content
            }, function (res) {
                if (res.code == '00000') {
                    layer.alert('交卷成功', {
                        offset: 't'
                    }, function () {
                        $("#body", window.parent.document).attr('src', 'self')
                    })
                } else {
                    layer.alert(res.message);
                }
            }, 'json')
            return false;
        });
    });
</script>
</html>